<template>
	<view class="container">
		<view class="container-body">
			<view class="csstext">
				<text>
					{{title?title:'尚未选择小区'}}
				</text>
			</view>
			<view class="communityManage">
				社区经理: {{nickname?nickname:'请选择小区后再试'}} : {{phonenumber}}
			</view>
			<TrList :communityData="datas"></TrList>
			<view class="footer">
				<view>
					<button class="changeCommunity" @click="showDrawer" type="default">选择小区</button>
					<uni-drawer ref="showRight" mode="right" :mask-click="true">
						<scroll-view style="height: 100%;" scroll-y="true">
							<view class="itemcss" v-for="item in content" @click="closeDrawer(item.text)">
								{{ item.text }}
							</view>
						</scroll-view>
					</uni-drawer>
				</view>
			</view>
			<view class="placeholder"></view>
		</view>
	</view>


</template>

<script>
	/**
	 * @description: 首页模块
	 */
	import {
		getCommunityListApi,
		getPostCommunityTreeList,
		getCommunityListTotalPage
	} from '@/api/community/community.js'
	import {
		openBroad
	} from '@/api/broad/broadapi.js'
	import TrList from '@/pages/common/commoncomp/TrList.vue'
	export default {
		components: {
			TrList
		},
		data() {
			return {
				title: null,
				nickname: null,
				phonenumber: null,
				datas: "",
				content: [],
				totalPage: 0
			}
		},
		created() {

		},
		mounted() {
			this.getCommunityTotalPage()
		},
		methods: {
			openBroadF() {
				openBroad();
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer(e) {
				this.getCommunityTreeList(e)
				this.$refs.showRight.close();
			},
			trigger(e) {
				this.content[e.index].active = !e.item.active
			},
			/**
			 * @description 获取小区列表的总页数
			 */
			getCommunityTotalPage() {
				getCommunityListTotalPage().then(res => (
					this.totalPage = res.total,
					this.getCommunityList()
				))
			},

			/**
			 * @description 获取小区列表
			 */
			getCommunityList(e) {
				let data = {
					communityName: e,
					nickname: null,
					phonenumber: null
				}
				getCommunityListApi(data,this.totalPage).then(res => {
					console.log('index.vue:99->',res)
					for (let singleData in res.rows) {
						let temp = {
							text: res.rows[singleData].communityName,
							active: false,
							nickname: res.rows[singleData].nickname,
							phonenumber: res.rows[singleData].phonenumber
						}
						this.$data.content.push(temp)
						// console.log(temp);
					}
				})
			},

			/**
			 * @description 获取某个小区的房屋列表
			 */
			getCommunityTreeList(cName) {
				console.log(cName);
				getPostCommunityTreeList(cName).then(res => {
					console.log(res);
					Object.keys(res.data.vo).forEach(key => {
						this.title = key
						this.datas = res.data.vo[key]
						console.log('===', key);
						console.log(this.datas);
					})
					for (let sd in this.content) {
						if (this.content[sd].text == this.title) {
							this.nickname = this.content[sd].nickname
							this.phonenumber = this.content[sd].phonenumber
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.choseCom {
		width: 100%;
		bottom: 0;
		position: absolute;
	}

	.csstext {
		text-align: center;
		height: 4vh;
		line-height: 4vh;
		font-size: 2vh;
		background-color: #e2e8f5;
	}

	.itemcss {
		text-align: center;
		height: 5vh;
		line-height: 5vh;
		font-size: 2vh;
		border-bottom: 1px solid;
		border-color: #f1f1f1;
	}

	.communityManage {
		background-color: #fdf6d9;
		height: 30px;
		line-height: 30px;
	}

	.container {
		display: flex;
		flex-direction: column;
		/* 让容器铺满整个页面 */
	}

	.footer {
		/* 将 footer 推到页面底部 */
		background-color: #fff;
		/* 设置 footer 背景色 */
		padding: 20px;
		/* 设置 footer 内边距 */
		position: relative;
		bottom: 0;
	}

	.container-body {}

	.changeCommunity {
		background-color: #4da2eb;
		color: #fff;
		width: 100%;
	}
</style>